<template>
  <div class="list">
    <div class="people">
      <div class="people_title">考勤信息</div>
    </div>

    <div class="flexBetweenCenter" style="margin-bottom:10px">
      <div style="color:#333;font-size:18px">月度考勤信息</div>
      <div class="top flexBetweenCenter">
        <div>
          <a-button icon="left" class="rigntMargin" @click="leftMonth" />
          <span class="monthPicker">
            <a-month-picker
              v-model="monthTime"
              format="YYYY年MM月"
              class="rigntMargin"
              @change="onChange"
            />

            <a-button icon="right" class="rigntMargin" @click="rightMonth" />
          </span>
        </div>
        <div>
          <a-input-search
            placeholder="请输入姓名"
            v-model="fullName"
            style="width: 300px"
            @search="onSearch"
          />
        </div>
      </div>
    </div>
    <a-spin :spinning="spinning">
      <div class="atable">
        <a-table :data-source="data" :scroll="{ x: 600}" :pagination="false">
          <a-table-column key="date" title="月份" data-index="date" width="150px" align="center" fixed='left'/>
          <a-table-column
            key="fullName"
            title="姓名"
            data-index="fullName"
            width="150px"
            align="center"
            fixed='left'
          >
            <template slot-scope="text">{{text}}</template>
          </a-table-column>
          <a-table-column
            key="postName"
            title="岗位"
            data-index="postName"
            width="150px"
            align="center"
            fixed='left'
          />
          <a-table-column
            key="attendanceDay"
            title="出勤天数"
            data-index="attendanceDay"
            width="120px"
            align="center"
            fixed='left'
          />
          <a-table-column
            :key="index.toString()"
            :data-index="index.toString()"
            v-for="index in this.dayNum"
            width="100px"
            align="center"
          >
            <!-- <span slot="title" :class="{ restDay: (moment(this.monthData+index).subtract(weekOfday - 6, 'days').format('YYYY-MM-DD')!='Saturday ')||(moment(this.monthData+index).subtract(weekOfday - 6, 'days').format('YYYY-MM-DD')!='Sunday ') }">{{index}}</span> -->
            <span slot="title" :class="{ restDay:isworkDay(index)}">{{index}}</span>
            <template slot-scope="text">
              <img :src="kaoqin2" alt v-if="(text=='1')||(text=='3')" />
              <img :src="kaoqin1" alt v-else />
            </template>
          </a-table-column>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="this.configFun.pageNum(total)"
            show-size-changer
            :page-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
              <!-- <span v-if="props.value === '40'">全部</span> -->
            </template>
          </a-pagination>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import kaoqin1 from '../../../assets/homeImg/kaoqin11.png'
import kaoqin2 from '@/assets/homeImg/kaoqin2.png'
import moment from 'moment'

import { monthAttendance } from '@/api/attendance'
export default {
  data() {
    return {
      monthTime: moment(new Date(), 'YYYY年MM月'),
      data: [],
      kaoqin1,
      kaoqin2,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 5,
      total: 1,
      fullName: '',
      monthData: '',
      dayNum: 30,
      spinning: false
    }
  },
  mounted() {
    // console.log(this.monthTime)
    this.monthData = moment(this.monthTime).format('YYYY-MM')

    this.getMonth()
  },
  watch: {
    monthData(val, oldval) {
      // console.log(val);
      this.dayNum = moment(val, 'YYYY-MM').daysInMonth()
    }
  },

  methods: {
    moment,
    isworkDay(res) {
      // let data = this.monthData + res
      let nowork = []
      nowork = this.getWeekend()
      // console.log(nowork)
      return nowork.includes(res)
    },
    getWeekend() {
      let week = [],
        td,
        day,
        d
      for (let i = 1; i <= this.dayNum; i++) {
        td = new Date(this.monthData + '/' + i)
        day = td.getDay()
        d = td.getDate()
        if (!isNaN(day)) {
          if (day == 0 || day == 6) {
            week.push(d)
          }
        }
      }
      return week
    },
    //搜索时获取满足的有多少页
    getTotal(val, current) {
      let size = ''
      let page = ''
      if (val) {
        size = val
      } else {
        size = this.pageSize
      }
      if (current) {
        page = current
      } else {
        page = this.current
      }
      let data = {
        date: this.monthData,
        likeFullName: this.fullName,
        orgId: sessionStorage.getItem('gatewayId'),
        projectId: sessionStorage.getItem('projectId'),
        page: this.current,
        size: this.pageSize,
        teamId: sessionStorage.getItem('teamId'),
        typeCode: '2'
      }
      monthAttendance(data).then((res) => {
        let data = res.data
        this.total = data.total
        //   console.log(Math.ceil(this.total/size));
        // console.log(page);
        if (Math.ceil(this.total / size) < page) {
          this.current = 1
        } else {
          this.current = page
        }

        this.pageSize = size
        this.getMonth()
      })
    },

    getMonth() {
      let data = {
        date: this.monthData,
        likeFullName: this.fullName,
        orgId: sessionStorage.getItem('gatewayId'),
        projectId: sessionStorage.getItem('projectId'),
        page: this.current,
        size: this.pageSize,
        teamId: sessionStorage.getItem('teamId'),
        typeCode: '2'
      }
      this.spinning = true
      monthAttendance(data).then((res) => {
        let data = res.data.data
        data.forEach((item) => {
          item.key = item.id
          item['list'] = []
          item.lists.forEach((listItem, index) => {
            let order = index + 1
            // let obj={}
            // obj[order]=listItem
            // item['list'].push(obj)
            item[order] = listItem
          })
        })
        this.data = data
        this.total = res.data.total
        this.spinning = false
        // console.log(this.data)
      })
    },
    onChange(value) {
      this.current = 1
      this.monthData = moment(this.monthTime).format('YYYY-MM')
      this.getMonth()
    },
    displayRender({ labels }) {
      return labels[labels.length - 1]
    },
    onSearch(value) {
      // console.log(value)
      this.getTotal()
    },
    leftMonth() {
      this.current = 1
      this.monthTime = moment(this.getLastMonth(this.monthTime._d), 'YYYY年MM月')
      this.monthData = moment(this.monthTime).format('YYYY-MM')
      this.getMonth()
    },
    rightMonth() {
      this.current = 1
      this.monthTime = moment(this.getNextMonth(this.monthTime._d), 'YYYY年MM月')
      this.monthData = moment(this.monthTime).format('YYYY-MM')
      // this.dayNum=27
      this.getMonth()
    },
    getLastMonth(date) {
      //获取上个月日期
      var year = date.getFullYear()
      var month = date.getMonth()
      if (month == 0) {
        year = year - 1
        month = 12
      }
      return year + '年' + month + '月'
    },
    getNextMonth(date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 2
      if (month == 13) {
        year = year + 1
        month = 1
      }
      return year + '年' + month + '月'
    },
    handleChange(value) {
      //   console.log(value)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    }
  }
}
</script>

<style scoped>
/* ::v-deep .ant-table-pagination.ant-pagination{
   display: none; } */
.part1_div {
  width: 375px;
  height: 50px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 23px;
}
.title {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}
.td_name {
  color: #1890ff;
  cursor: pointer;
}
.people {
  height: 45px;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 30px;
}
.people_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
.tableInBox {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
  background-color: #f6f8f9;
}
.tableInBox2 {
  width: 160px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
}
::v-deep .ant-modal {
  width: 1040px !important;
}
::v-deep .ant-modal-body {
  padding: 20px;
  padding-top: 50px;
}
.date {
  width: 100px;
  height: 50px;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
  margin: 0;
  text-align: center;
  line-height: 50px;
  background-color: #f6f8f9;
}
.time {
  width: 160px;
  height: 50px;
  border: 1px solid #eaeaea;
  border-left: none;
  border-bottom: none;
  margin: 0;
  text-align: center;
  line-height: 50px;
  background-color: #f6f8f9;
}
::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
}

.monthPicker ::v-deep .ant-calendar-picker-input.ant-input {
  line-height: 1.5;
  background: #1890ff;
  text-align: center;
  color: #fff;
  width: 120px;
  border: 1px solid #1890ff;
  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top: 20px;
  margin-bottom: 20px;
}
.atable {
  margin-bottom: 20px;
}
::v-deep .ant-table-tbody>tr>td, .ant-table-thead>tr>th {
  height: 55.5px;
}
</style>
